<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #left {
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        #right {
            width: 200px;
            height: 200px;
            background-color: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        #middle{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: fixed;
            left: 0;
            bottom: 50%;
        }

    </style>
</head>
<body>
<!--元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。-->
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="middle">
</div>
</body>
</html>